<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/reset/reset.css">
    <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./lib/fdj/css/magnifier.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/product.css">

</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="top">
            <div class="lg-container clearfix topbox">
                <div class="fl fs18 urltxt">legouchina.cn</div>
                <div class="fr rightbox">欢迎光临 <a href="index.html" class="color-f60">乐购</a>，请<a href="./login.html"
                        class="color-white">登录</a>/<a href="./registered.html" class="color-f60">注册</a></div>
            </div>
        </div>
    </header>
    <div class="logos lg-container">
        <div class="firstbox"><a href="#"><img src="./images/logo.jpg" alt=""></a></div>
        <div class="secondbox"><img src="./images/logo2.jpg" alt=""></div>
        <div class="thirdbox">
            <h6>DJI大疆官方旗舰店</h6>
            <p>品牌直销</p>
            <div>收藏本店</div>
        </div>
        <form action="" class="clearfix">
            <input type="text" class="fl" placeholder="请输入搜索的商品名">
            <button class="fl"></button>
        </form>
        <div class="btn">
            <button class="clearfix"><span><img src="./images/shopcar.png" alt=""></span>
                <p>购物车</p>
            </button>
        </div>
    </div>
    <!-- 灵眸 -->
    <div class="lingmou">
        <img src="./images/lingmou.jpg" alt="">
    </div>
    <!-- 放大镜 -->
    <div class="mag lg-container">
        <div class="magnifier" id="magnifier1">
            <div class="magnifier-container">
                <div class="images-cover"></div>
                <!--当前图片显示容器-->
                <div class="move-view"></div>
                <!--跟随鼠标移动的盒子-->
            </div>
            <div class="magnifier-assembly">
                <div class="magnifier-btn">
                    <span class="magnifier-btn-left">&lt;</span>
                    <span class="magnifier-btn-right">&gt;</span>
                </div>
                <!--按钮组-->
                <div class="magnifier-line">
                    <ul class="clearfix animation03">
                        <li>
                            <div class="small-img">
                                <img src="./images/dji1.jpg" />
                            </div>
                        </li>
                        <li>
                            <div class="small-img">
                                <img src="./images/dji2.jpg" />
                            </div>
                        </li>
                        <li>
                            <div class="small-img">
                                <img src="./images/dji3.jpg" />
                            </div>
                        </li>
                        <li>
                            <div class="small-img">
                                <img src="./images/dji4.jpg" />
                            </div>
                        </li>
                        <li>
                            <div class="small-img">
                                <img src="./images/dji1.jpg" />
                            </div>
                        </li>
                    </ul>
                </div>
                <!--缩略图-->
            </div>
            <div class="magnifier-view"></div>
            <!--经过放大的图片显示容器-->
        </div>
        <div class="mag-right">
            <div class="mag-right-txt">
                <h2>【新品首发】DJI大疆RoboMaster&emsp;S1&emsp;机甲大师S1&emsp;专业教育机器人</h2>
            </div>
            <p>寓教于乐，玩出名堂</p>
            <div class="grey-box">
                <div class="grey-box-left">
                    <div>价格:</div>
                    <div>促销价:</div>
                    <div>本店活动:</div>
                </div>
                <div class="grey-box-right">
                    <p>￥3800.00</p>
                    <h4>￥3499.00&nbsp;-&nbsp;4200.00</h4>
                    <span>满99包邮</span>
                </div>
            </div>
            <span>运费:&emsp;&emsp;&emsp;江苏苏州&nbsp;至&nbsp;成都&ensp;快递:0.00</span>
            <ul>
                <li>
                    <div>月销量&nbsp;<span class="fw col-red fs16">2871</span></div>
                </li>
                <li>
                    <div>累积评价&nbsp;<soan class="fw col-red fs16">10915</soan>
                    </div>
                </li>
                <li>
                    <div>送积分&nbsp;<span class="fw col-red fs16">300</span>起</div>
                </li>
            </ul>
            <!-- 颜色分类 -->
            <div class="classification">
                <!-- 左 -->
                <div class="classification-left">
                    颜色分类:
                </div>
                <!-- 右 -->
                <div class="classification-right">
                    <ul>
                        <li>机甲大师S1RoboMaster&nbsp;S1套餐一</li>
                        <li>机甲大师S1RoboMaster&nbsp;S1套餐二</li>
                        <li>机甲大师S1RoboMaster&nbsp;S1套餐三</li>
                        <li>机甲大师S1RoboMaster&nbsp;S1单机</li>
                        <li>机甲大师全套配件</li>
                        <li>机甲大师s2预定</li>
                    </ul>
                </div>
            </div>
            <!-- 数量 -->
            <div class="number">
                <div class="number-left">
                    数量:
                </div>
                <div class="number-right">
                    <div class="fl" id="joinD">
                        <input value="1" class="fl">
                        <button class="jia fr">+</button>
                        <br>
                        <button class="jian fr">-</button>
                    </div>
                </div>
            </div>
            <!-- 花呗分期 -->
            <div class="huabei">
                <div class="huabei-left">花呗分期:</div>
                <div class="huabei-right">
                    <ul>
                        <li>
                            <h5>￥1166.33*3期</h5>
                            <p>(0手续费)</p>
                        </li>
                        <li>
                            <h5>￥583.16*6期</h5>
                            <p>(0手续费)</p>
                        </li>
                        <li>
                            <h5>￥313.14*12期</h5>
                            <p>(0手续费)</p>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 购物车按钮 -->
            <div class="shopcar">
                <button class="nowbuy">立即购买</button>
                <button class="car">加入购物车</button>
            </div>
        </div>
    </div>
    <!-- 选项卡 -->
    <div class="xxk lg-container">
        <div class="xxk-left">
            <div class="xxk-left-top">
                <div class="xxkbtn1 active">产品详情</div>
                <div class="xxkbtn2">累积评价</div>
            </div>
            <!-- 评分 -->
            <div class="bigimg">
                <img src="./images/bigimg.jpg" alt="">
            </div>
            <ul>
                <li>
                    <div class="li-left">
                        <div class="pf-txt">
                            挺不错的，机甲大师对战T-34-85
                        </div>
                        <div class="li-img">
                            <img src="./images/dji1.jpg" alt="">
                            <img src="./images/dji1.jpg" alt="">
                        </div>
                        <span>2019-09-09&nbsp;13:55:30</span>
                        <p>
                            解释：亲！感谢你在DJI大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们也在一直不断努力争取更您最好的购物体验，感谢亲的支持，期待下次亲的光临
                        </p>
                    </div>
                    <div class="li-right">
                        <p>t***1(匿名)</p>
                    </div>
                </li>
                <li>
                    <div class="li-left">
                        <div class="pf-txt">
                            挺不错的，机甲大师对战T-34-85
                        </div>
                        <div class="li-img">
                            <img src="./images/dji1.jpg" alt="">
                            <img src="./images/dji1.jpg" alt="">
                        </div>
                        <span>2019-09-09&nbsp;13:55:30</span>
                        <p>
                            解释：亲！感谢你在DJI大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们也在一直不断努力争取更您最好的购物体验，感谢亲的支持，期待下次亲的光临
                        </p>
                    </div>
                    <div class="li-right">
                        <p>t***1(匿名)</p>
                    </div>
                </li>
                <li>
                    <div class="li-left">
                        <div class="pf-txt">
                            挺不错的，机甲大师对战T-34-85
                        </div>
                        <div class="li-img">
                            <img src="./images/dji1.jpg" alt="">
                            <img src="./images/dji1.jpg" alt="">
                        </div>
                        <span>2019-09-09&nbsp;13:55:30</span>
                        <p>
                            解释：亲！感谢你在DJI大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们也在一直不断努力争取更您最好的购物体验，感谢亲的支持，期待下次亲的光临
                        </p>
                    </div>
                    <div class="li-right">
                        <p>t***1(匿名)</p>
                    </div>
                </li>
                <li>
                    <div class="li-left">
                        <div class="pf-txt">
                            挺不错的，机甲大师对战T-34-85
                        </div>
                        <div class="li-img">
                            <img src="./images/dji1.jpg" alt="">
                            <img src="./images/dji1.jpg" alt="">
                        </div>
                        <span>2019-09-09&nbsp;13:55:30</span>
                        <p>
                            解释：亲！感谢你在DJI大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们也在一直不断努力争取更您最好的购物体验，感谢亲的支持，期待下次亲的光临
                        </p>
                    </div>
                    <div class="li-right">
                        <p>t***1(匿名)</p>
                    </div>
                </li>
                <li>
                    <div class="li-left">
                        <div class="pf-txt">
                            挺不错的，机甲大师对战T-34-85
                        </div>
                        <div class="li-img">
                            <img src="./images/dji1.jpg" alt="">
                            <img src="./images/dji1.jpg" alt="">
                        </div>
                        <span>2019-09-09&nbsp;13:55:30</span>
                        <p>
                            解释：亲！感谢你在DJI大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们也在一直不断努力争取更您最好的购物体验，感谢亲的支持，期待下次亲的光临
                        </p>
                    </div>
                    <div class="li-right">
                        <p>t***1(匿名)</p>
                    </div>
                </li>
                <li>
                    <div class="li-left">
                        <div class="pf-txt">
                            挺不错的，机甲大师对战T-34-85
                        </div>
                        <div class="li-img">
                            <img src="./images/dji1.jpg" alt="">
                            <img src="./images/dji1.jpg" alt="">
                        </div>
                        <span>2019-09-09&nbsp;13:55:30</span>
                        <p>
                            解释：亲！感谢你在DJI大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们也在一直不断努力争取更您最好的购物体验，感谢亲的支持，期待下次亲的光临
                        </p>
                    </div>
                    <div class="li-right">
                        <p>t***1(匿名)</p>
                    </div>
                </li>
                <li>
                    <div class="li-left">
                        <div class="pf-txt">
                            挺不错的，机甲大师对战T-34-85
                        </div>
                        <div class="li-img">
                            <img src="./images/dji1.jpg" alt="">
                            <img src="./images/dji1.jpg" alt="">
                        </div>
                        <span>2019-09-09&nbsp;13:55:30</span>
                        <p>
                            解释：亲！感谢你在DJI大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们也在一直不断努力争取更您最好的购物体验，感谢亲的支持，期待下次亲的光临
                        </p>
                    </div>
                    <div class="li-right">
                        <p>t***1(匿名)</p>
                    </div>
                </li>
                <li>
                    <div class="li-left">
                        <div class="pf-txt">
                            挺不错的，机甲大师对战T-34-85
                        </div>
                        <div class="li-img">
                            <img src="./images/dji1.jpg" alt="">
                            <img src="./images/dji1.jpg" alt="">
                        </div>
                        <span>2019-09-09&nbsp;13:55:30</span>
                        <p>
                            解释：亲！感谢你在DJI大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们也在一直不断努力争取更您最好的购物体验，感谢亲的支持，期待下次亲的光临
                        </p>
                    </div>
                    <div class="li-right">
                        <p>t***1(匿名)</p>
                    </div>
                </li>
                <li>
                    <div class="li-left">
                        <div class="pf-txt">
                            挺不错的，机甲大师对战T-34-85
                        </div>
                        <div class="li-img">
                            <img src="./images/dji1.jpg" alt="">
                            <img src="./images/dji1.jpg" alt="">
                        </div>
                        <span>2019-09-09&nbsp;13:55:30</span>
                        <p>
                            解释：亲！感谢你在DJI大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们也在一直不断努力争取更您最好的购物体验，感谢亲的支持，期待下次亲的光临
                        </p>
                    </div>
                    <div class="li-right">
                        <p>t***1(匿名)</p>
                    </div>
                </li>
                <li>
                    <div class="li-left">
                        <div class="pf-txt">
                            挺不错的，机甲大师对战T-34-85
                        </div>
                        <div class="li-img">
                            <img src="./images/dji1.jpg" alt="">
                            <img src="./images/dji1.jpg" alt="">
                        </div>
                        <span>2019-09-09&nbsp;13:55:30</span>
                        <p>
                            解释：亲！感谢你在DJI大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们也在一直不断努力争取更您最好的购物体验，感谢亲的支持，期待下次亲的光临
                        </p>
                    </div>
                    <div class="li-right">
                        <p>t***1(匿名)</p>
                    </div>
                </li>
                <li>
                    <div class="li-left">
                        <div class="pf-txt">
                            挺不错的，机甲大师对战T-34-85
                        </div>
                        <div class="li-img">
                            <img src="./images/dji1.jpg" alt="">
                            <img src="./images/dji1.jpg" alt="">
                        </div>
                        <span>2019-09-09&nbsp;13:55:30</span>
                        <p>
                            解释：亲！感谢你在DJI大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们也在一直不断努力争取更您最好的购物体验，感谢亲的支持，期待下次亲的光临
                        </p>
                    </div>
                    <div class="li-right">
                        <p>t***1(匿名)</p>
                    </div>
                </li>
                <li>
                    <div class="li-left">
                        <div class="pf-txt">
                            挺不错的，机甲大师对战T-34-85
                        </div>
                        <div class="li-img">
                            <img src="./images/dji1.jpg" alt="">
                            <img src="./images/dji1.jpg" alt="">
                        </div>
                        <span>2019-09-09&nbsp;13:55:30</span>
                        <p>
                            解释：亲！感谢你在DJI大疆官方旗舰店的购物及评价，能让亲满意是我们最开心的事情，我们会不断的努力，争取给您更多更好的产品，我们也在一直不断努力争取更您最好的购物体验，感谢亲的支持，期待下次亲的光临
                        </p>
                    </div>
                    <div class="li-right">
                        <p>t***1(匿名)</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="xxk-right">
            <div class="xxk-right-top">
                猜你喜欢
            </div>
            <ul>
                <li>
                    <img src="./images/fei.jpg" alt="">
                </li>
                <li>
                    <img src="./images/fei.jpg" alt="">
                </li>
                <li>
                    <img src="./images/fei.jpg" alt="">
                </li>
                <li>
                    <img src="./images/fei.jpg" alt="">
                </li>
            </ul>
        </div>
    </div>
    <!-- 分页器 -->
    <div class="Pager" style="margin: 20px;">
        <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-center">
              <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
              </li>
              <li class="page-item"><a class="page-link" href="#">1</a></li>
              <li class="page-item"><a class="page-link" href="#">2</a></li>
              <li class="page-item"><a class="page-link" href="#">3</a></li>
              <li class="page-item">
                <a class="page-link" href="#">下一页</a>
              </li>
            </ul>
          </nav>
    </div>
    <!-- 脚部 -->
    <footer class="lg-container">
        <div class="footer-top">
            <ul>
                <li class="clearfix">
                    <img class="fl" src="./images/footer1.jpg" alt="">
                    <div class="fl">
                        <h4 class="fs20">正品保障</h4>
                        <p class="fs14 col-d6d6d6">正品行货&emsp;放心选购</p>
                    </div>
                </li>
                <li class="clearfix">
                    <img class="fl" src="./images/footer2.jpg" alt="">
                    <div class="fl">
                        <h4 class="fs20">满86包邮</h4>
                        <p class="fs14 col-d6d6d6">满86元&emsp;免运费</p>
                    </div>
                </li>
                <li class="clearfix">
                    <img class="fl" src="./images/footer3.jpg" alt="">
                    <div class="fl">
                        <h4 class="fs20">售后无忧</h4>
                        <p class="fs14 col-d6d6d6">七天无理由退货</p>
                    </div>
                </li>
                <li class="clearfix">
                    <img class="fl" src="./images/footer4.jpg" alt="">
                    <div class="fl">
                        <h4 class="fs20">准时送达</h4>
                        <p class="fs14 col-d6d6d6">收货时间由你做主</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="footer-bottom">
            <!-- 左 -->
            <div class="fb-left clearfix">
                <ul class="list4">
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">支付方式</a></li>
                    <li><a href="#">订单服务</a></li>
                    <li><a href="#">退换货</a></li>
                </ul>
                <ul class="list5  fl">
                    <li><a href="#">购物路程</a></li>
                    <li><a href="#">货到付款</a></li>
                    <li><a href="#">退货流程</a></li>
                    <li><a href="#">退货政策</a></li>
                </ul>
                <ul class="list6  fl">
                    <li><a href="#">发票制度</a></li>
                    <li><a href="#">网上支付</a></li>
                    <li><a href="#">订单状态说明</a></li>
                    <li><a href="#">自动退换货</a></li>
                </ul>
                <ul class="list7 fl">
                    <li><a href="#">账户管理</a></li>
                    <li><a href="#">礼品卡支付</a></li>
                    <li><a href="#">自动取消订单</a></li>
                    <li><a href="#">自动退货流程</a></li>
                </ul>
            </div>
            <!-- 右 -->
            <div class="fb-right">
                <ul>
                    <li>
                        <h5>App更优惠</h5>
                        <img src="./images/qryhd.png" alt="">
                    </li>
                    <li>
                        <h5>加微信查订单</h5>
                        <img src="./images/qryhd.png" alt="">
                    </li>
                </ul>
            </div>
        </div>
        <div class="footer-txt">
            <p>沪ICP备XXXXXXXXXXXXX号 | 经营证明 |互联网药品信息服务资格证(沪)-2017-0006 |违法和不良信息举报电话:xxx-xxxxxxxx | 沪B2-xxxxxxx</p>
            <p>沪公网安备 xxxxxxxx号 | 友情链接 | 出版物经营许可证 |  增值电信业务经营许可证</p>
            <div>
                <ul>
                    <li>
                        <img src="./images/showlogo1.jpg" alt="">
                    </li>
                    <li>
                        <img src="./images/showlogo2.jpg" alt="">
                    </li>
                    <li>
                        <img src="./images/showlogo3.png" alt="">
                    </li>
                    <li>
                        <img src="./images/showlogo4.jpg" alt="">
                    </li>
                    <li>
                        <img src="./images/showlogo5.png" alt="">
                    </li>
                    <li>
                        <img src="./images/showlogo6.jpg" alt="">
                    </li>
                </ul>
            </div>
        </div>
    </footer>
</body>
<script src="./lib/jquery/jquery.min.js"></script>
<script src="./lib/bootstrap/js/bootstrap.min.js"></script>
<script src="./lib/fdj/js/magnifier(1).js"></script>
<script src="./js/product.js"></script>

</html>